<template>
  <div class="user-container">
    <div class="user">
      <div class="user-head" v-if="userInfo.user_id">
        <div class="header-left">
            <div title="修改头像" @click="updateAvatar">
              <img :src="avatar"
                class="user-avatar" :class="{'svip-avatar':isSvip}"/>
              <svg-icon :icon-class="vipIcon" className="vip-icon"/>
            </div>
          <div class="info-wrap">
            <el-dropdown trigger="hover" @command="handleCommand">
              <p class="nickname">
                <pre class="name-info">{{ userInfo.Nickname }}</pre>
                <i class="el-icon-caret-bottom"></i>
              </p>
              <el-dropdown-menu slot="dropdown" class="info-wrap-dropdown-menu">
                <el-dropdown-item command="updateNickName">修改昵称</el-dropdown-item>
                <el-dropdown-item command="updateAvatar">修改头像</el-dropdown-item>
                <el-dropdown-item v-if="needBind" divided command="handleLoginOut">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <p class="user-info">
              <span>(ID:{{userInfo.user_id}})</span>
              <span class="vip-str is-member" v-if="userInfo.is_member">
                <template v-if="allVipUnlimited">终身VIP</template>
                <template v-else>VIP会员
                  <template v-if="packagesList.length === 1">
                    <span class="ml10">{{ packagesList[0].expire_at|parseTime }}到期</span>
                    <span class="period_box" v-if="periodInfo.agreement_no">
                      <i>{{periodInfo.name}}订阅中</i>
                      <div class="period_popover">
                        <div class="period_popover_body">
                          <p class="period_popover_item">下次续费日期：{{periodInfo.next_execute_time|parseTime}}</p>
                          <p class="period_popover_item">下次续费金额：{{periodInfo.single_amount|moneyToyuan}}元</p>
                          <p class="period_popover_item">支付方式：{{periodInfo.pay_way|filtersPayType}}</p>
                          <!-- <div class="mt10 text-center">
                            <span class="cancel_period" @click="cancelPeriod">取消自动续费</span>
                          </div> -->
                        </div>
                      </div>
                    </span>
                  </template>
                </template>
              </span>
              <span class="vip-str" v-else>您还不是VIP会员</span>
            </p>
          </div>
        </div>
        <div class="header-right">
          <span class="act-code-btn" @click="onActCode" v-if="!allVipUnlimited">兑换会员</span>
          <span class="unlogin-head-btn" @click="showBind=true" v-if="needBind">绑定账号</span>
          <span class="logout-btn" @click="handleLoginOut" v-else>退出登录</span>
        </div>
      </div>
      <div class="user-head" v-else>
        <div class="header-left">
          <img :src="avatar"
              @click="handleLogin"
              class="user-avatar" />
          <svg-icon className="vip-icon" icon-class="uvip" />
          <div class="info-wrap">
            <p class="login-tips">登录查看会员权益</p>
          </div>
        </div>
        <div class="header-right">
          <span class="act-code-btn" @click="onActCode">兑换会员</span>
          <span class="unlogin-head-btn" @click="handleLogin">立即登录</span>
        </div>
      </div>
      <div v-if="onAd" class="ad-card flex-center"
        :class="[
          `ad-card${adTime.leaveTime}`,
          `ad-half${halfLeftDay}`,
          {'ad-card-half':inHalfTime},
          {'ad-card-half_n':packagesList.length === 1&&inHalfTime}
        ]"
        @click="onAdDialogShow">
        <span v-if="inHalfTime" class="ad-card-time fs12">{{ adTime.start }} 00:00 — {{ adTime.halfEndTime }} 23:59</span>
        <span v-else-if="adTime.leaveTime===-1" class="ad-card-time fs12">{{ adTime.addStart }} 00:00 — {{ adTime.addEnd }} 23:59</span>
        <span v-else class="ad-card-time fs12">{{ halfStart }} 00:00 — {{ adTime.end }} 23:59</span>
      </div>
      <div v-if="packagesList.length === 1">
        <StandAlone :packages="packagesList"/>
        <!-- <RightsListV2 style="margin-top:14px;" v-if="packagesList[0].tag === 3" :packages="packagesList[0]"/> -->
      </div>

      <div v-else-if="packagesList.length" :class="{'has-login':userInfo.user_id}">
        <div class="package-box">
        <div v-for="(packageItem,i) in packagesList"
          :key="packageItem.id"
          class="package-list"
          :class="{'package-vip':packageItem.tag>0}">
          <span class="tag" :class="`tag-${packageItem.tag}`">{{ packageItem|filtersTagName }}</span>

          <div v-if="packageItem.tag !== 3 && buyFreeType" class="act-tag">
            <div class="hot-tips">{{ buyFreeType|filtersActName }}</div>
          </div>
          <div class="package-title" v-if="packageItem.name">
            <img :src="packageItem.icon" />
            <div>
              <p class="fb">{{packageItem.name.replace('权益包', 'VIP')}}</p>
              <span class="end-time" v-if="packageItem.tag===3" @click="toOrderList">终身会员</span>
              <span class="end-time" v-else-if="packageItem.expire_at" @click="toOrderList">{{packageItem.expire_at|parseTime}}到期</span>
            </div>
          </div>

          <div class="package-info" @mouseenter="packageItem.showTrial=true" @mouseleave="packageItem.showTrial=false">
            <div class="package-content">
              <RightsItem :catList="packageItem.cat_list" class="package-rights" :leng="packageItem.tag===3||!showEnergy?6:4">
                <template slot-scope="scope">
                  <p>
                    <svg-icon iconClass="has-rights2"/>{{scope.data.name}}
                  </p>
                </template>
              </RightsItem>
            </div>

            <div class="package-btn" :class="{'has-trial': !showEnergy && packageItem.showTrial && packageItem.tag !== 3 && packageItem.trialTime}">
              <span class="look-more" @click="onDetail(i)">更多权益</span>

              <div class="btns-wrap" v-if="showEnergy">
                <el-button-group v-if="packageItem.tag!==3">
                  <el-button v-if="packageItem.trialTime"
                    class="btn-trial2"
                    @click="showTrialDialog(packageItem.pkg_id)">{{packageItem.trial_status !== 2?`领取${packageItem.trialTime}试用`:`领${packageItem.trialTime}体验券`}}</el-button>
                  <el-button type="success"
                    @click="showMemberDialog(packageItem,`vip${i}`)">
                    <p>{{ packageItem.tag > 1|| packageItem.tag===-1 ? '续费' : '开通会员'}}</p>
                    <p class="mt5 fs12 text-ellipsis" v-if="!packageItem.trialTime && !(packageItem.tag > 1|| packageItem.tag===-1) && buyVipBtnCfg.content">{{ buyVipBtnCfg.content }}</p>
                  </el-button>
                </el-button-group>
                <div class="mt10">
                  <el-button type="info"
                    @click="showMemberDialog(packageItem, 'energy')">
                    <p>购买AI能量包</p>
                    <p class="mt5 fs12 op-7" v-if="packageItem.tag > 1|| packageItem.tag===-1">会员优享折扣</p>
                  </el-button>
                </div>
              </div>

              <div class="old-btns-wrap" v-else>
                <el-button class="btn-trial btn-h34 btn-w130 has-radius"
                  @click="packageItem.showTrial = false, showTrialDialog(packageItem.pkg_id)">{{packageItem.trial_status !== 2?`领取${packageItem.trialTime}试用`:`领${packageItem.trialTime}体验券`}}</el-button>
                <div></div>
                <el-button v-if="packageItem.tag===3"
                  class="btn-h34 btn-w130 has-radius"
                  type="info"
                  @click="onDetail(i)">查看权益</el-button>
                <el-button v-else
                  class="btn-h34 btn-w130 has-radius"
                  :class="[`tag-btn-${packageItem.tag}`]"
                  type="success"
                  @click="packageItem.showTrial = false, showMemberDialog(packageItem,`vip${i}`)">{{ packageItem.tag > 1|| packageItem.tag===-1 ? '续费' : '开通会员'}}</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
    <!-- 试用弹框 -->
    <div class="trial-wrapper">
      <el-dialog custom-class="trial-dialog"
        :visible.sync="trialVisible"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        lock-scroll
        width="630px"
        top="10vh">
        <template #title>
          <span class="dialog-title">
            {{activePackage.trialTime}}免费试用福利
          </span>
        </template>
        <div class="trial-header">
          该权益包可免费试用{{activePackage.trialTime}}哦！快来试试吧~
        </div>
        <div class="rights-title fz16">{{activePackage.name}}</div>
        <EquityList :data="activePackage.cat_list"/>
        <div slot="footer" class="trial-dialog-footer">
          <el-button type="success" class="btn-h36 btn-w150" @click="onTrial">立即领取</el-button>
          <el-button class="btn-cancel btn-h36 btn-w150"
            style="margin-left:20px"
            @click="showMemberDialog()">直接购买</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 激活码输入弹窗 -->
    <el-dialog custom-class="dialog-offset inner-dialog"
      :visible.sync="showInCodeDialog"
      :close-on-click-modal="false"
      top="28vh"
      width="364px">
      <template #title>
        <span class="xz-confirm-title">
          <svg-icon :iconClass="appCfg.logo"/>
          {{appCfg.name}}
        </span>
      </template>
      <div class="code-wrap">
        <p class="fz12 mb10">请输入兑换码：</p>
        <el-input ref="exchangeCode" v-model.trim="exchangeCode" maxlength="16" size="small"/>
        <el-button size="small"
          class="exchange-btn"
          type="success"
          :disabled="!/^[0-9A-Za-z]{16}$/.test(exchangeCode)"
          :loading="exchangeLoading"
          @click="checkExchangeCode">立即兑换</el-button>
      </div>
      <div class="code-footer">
        <span @click.prevent="openKefuUrl" class="fz12 kefu-link">联系客服</span>
        <span @click.prevent="openUrl(appCfg.site+'/cdk-protocol.html',1757)" class="fz12 licence-link">《兑换码使用协议》</span>
      </div>
    </el-dialog>
    <!-- 激活码确认框 -->
    <el-dialog :visible.sync="confirmExchangeDialog"
      :close-on-click-modal="false"
      custom-class="exchange-code-dialog"
      :before-close="onExchangeClose"
      top="10vh"
      width="630px">
      <div class="exchange-code-info">
        <p class="code-info-title">
          <svg-icon iconClass="vip"/>
          此兑换码将会获得{{exchangeCodePackage.show_name}}
        </p>
        <p class="mb20">您将获得以下权益：</p>
        <EquityList :data="exchangeCodePackage.cat_list" isBlack/>
      </div>
      <div slot="footer" class="confirm-code-footer">
        <el-button
          class="btn-h36 btn-w150 has-radius"
          @click="onExchangeClose">取消</el-button>
        <el-button
          class="btn-h36 btn-w150 has-radius"
          type="success"
          :loading="exchangeLoading"
          @click="confirmExchange">确定兑换</el-button>
      </div>
    </el-dialog>
    <!-- 查看权益弹窗 -->
    <el-dialog :visible.sync="showDetailDialog"
      custom-class="dialog-detail"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      lock-scroll
      width="730px"
      top="10vh">
      <EquityTabs class="rights-detail" ref="detailEquity" isBlack :data="packagesList" :autoTabs="false">
        <!-- <template slot-scope="scope">
          <p class="rights-title black-bg-text fz12">{{scope.data.name}}</p>
        </template> -->
      </EquityTabs>
    </el-dialog>
    <el-dialog :visible.sync="adDialogShow"
      :custom-class="`dialog-ad dialog-ad${adTime.leaveTime} ${inHalfTime?'ad-dialog-half':''} ${packagesList.length === 1&&inHalfTime?'ad-dialog-half_n':''}`"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      lock-scroll
      width="596px"
      top="10vh">
      <div class="ad-header">
        <div v-if="inHalfTime" class="fs12">{{ adTime.start }} 00:00 — {{ adTime.halfEndTime }} 23:59</div>
        <div v-else-if="adTime.leaveTime===-1" class="fs12">{{ adTime.addStart }} 00:00 — {{ adTime.addEnd }} 23:59</div>
        <div class="fz12" v-else>{{halfStart}} 00:00 — {{adTime.end}} 23:59</div>
      </div>
      <el-tabs class="ad-tabs" v-model="adActive">
        <el-tab-pane v-for="item in packagesList"
          :key="item.id"
          :label="item.name.replace('权益包','权益')"
          :name="item.pkg_id"
          lazy>
          <Pay
            v-if="adDialogShow"
            :tag="item.tag"
            :theme="3"
            :pkgId="item.pkg_id"
            :buyFreeActId="buyFreeActId"
            :pkgIds="appInfo.allPackages"
            @toCouponPage="toCouponPage"
            @paySuccess="onPaySucces"/>
          <RightsListV2 class="ad-right-list mt10" :packages="item">
            <div slot="title" class="ad-right-title">
              <svg-icon iconClass="vip"></svg-icon>会员权益
            </div>
          </RightsListV2>
          <p class="copyright">*本活动最终解释权归深圳市常青藤软件科技有限公司所有</p>
        </el-tab-pane>
      </el-tabs>

    </el-dialog>
    <AvaterDialog :visible.sync="portraitOpen" :avatar="avatar"/>
    <el-dialog
      :visible.sync="showBind"
      customClass="dialog-offset bind-dialog"
      top="15vh"
      :close-on-click-modal="false"
      width="350px">
      <BindPhone v-if="bindType!=='wechat'" ref="bindPhone" :visible="showBind" @completeBind="onBindSuccess"/>
      <BindWx v-else ref="bindWx" @completeBind="onBindSuccess"/>
      <div class="other-login">
        <p class="other-login-title">
          <b></b>
          <span>其他绑定账号方式</span>
          <b></b>
        </p>
        <span class="icon-btn" title="手机号" v-if="bindType!=='phone'">
          <svg-icon iconClass="phone2"
            class="phone"
            @click="bindType='phone'" />
        </span>
        <span class="icon-btn" title="微信" v-if="bindType!=='wechat'">
          <svg-icon iconClass="wechat"
            class="wechat"
            @click="bindType='wechat'" />
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
import Emitter from 'element-ui/lib/mixins/emitter'
import { activityList } from '@/api/common'
import { getPeriodInfo, unSignPeriod, getChangeExperienceInfo, updateUser } from '@/api/user'
import { getPackagesList, batchDrawTrial } from '@/api/rights'
import { exchangeCodeResource, actExchangeCode } from '@/api/order'
import RightsItem from './components/rights-item'
import StandAlone from './components/stand-alone'
import EquityTabs from '@/components/member/equity-tabs'
import EquityList from '@/components/member/equity-list'
import RightsListV2 from '@/components/member/rights-list-v2'
import Pay from '@/components/pay'
import AvaterDialog from './components/avater'
import BindPhone from '../security-center/components/bind-phone'
import BindWx from '../security-center/components/bind-wx'
import { mapGetters } from 'vuex'
import { parseTime } from '@/utils'
import { isPassVersion, isPassVersionByApp, openKefu } from '@/utils/judge'
import { getLeftDay, getCidByPkg } from '@/utils/costum'
import { getSceneCouponConfig } from '@/api/coupon'
export default {
  name: 'UserCenter',
  mixins: [Emitter],
  components: {
    EquityTabs,
    EquityList,
    RightsListV2,
    RightsItem,
    StandAlone,
    Pay,
    AvaterDialog,
    BindWx,
    BindPhone
  },
  data () {
    return {
      pkgid: null,
      buyFreeActId: null,
      adTime: {
        start: '2024/06/03',
        end: '2024/06/18',
        halfEndTime: '2024/06/10',
        leaveTime: 14,
        addStart: '2024/06/19',
        addEnd: '2024/06/21'
      },
      hasSvip: false,
      portraitOpen: false, // 换头像弹框
      onAd: false,
      adDialogShow: false,
      trialVisible: false,
      showInCodeDialog: false,
      confirmExchangeDialog: false,
      showDetailDialog: false,
      exchangeLoading: false,
      exchangeCode: '',
      packagesList: [], // 权益包列表
      activePackage: {},
      exchangeCodePackage: {},
      adActive: '', // 活动选中tabs
      orderInfo: {},
      adPayInfo: {},
      expList: [],
      periodInfo: {},
      showBind: false,
      bindType: 'wechat',

      showEnergy: false,
      buyVipBtnCfg: {
        content: ''
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'appInfo', 'appCfg']),
    halfStart () {
      if (!this.adTime.halfEndTime) return this.adTime.start
      return parseTime(new Date(this.adTime.halfEndTime).getTime() + 1000 * 60 * 60 * 24, '{y}/{m}/{d}')
    },
    inHalfTime () {
      return this.halfLeftDay > 0
    },
    halfLeftDay () {
      if (!this.adTime.halfEndTime) return 0
      return getLeftDay(this.adTime.halfEndTime + ' 23:59', new Date().getTime() / 1000)
    },
    avatar () {
      const avatar = this.userInfo?.Portrait
      if (avatar) {
        return avatar.replace('http://', 'https://')
      }
      return require('@/assets/avatar.svg')
    },
    userPackageInfo () {
      const buyList = this.userInfo.buy_right_package || []
      const expList = this.expList
      for (const item of buyList) {
        const index = expList.findIndex(itemb => itemb.pkg_id === item.pkg_id)
        if (index !== -1) {
          const obj = expList.splice(index, 1)[0]
          Object.assign(item, obj)
        }
      }
      return buyList.concat(this.expList)
    },
    isSvip () {
      if (!this.userPackageInfo) return false
      const svipPackage = this.userPackageInfo.find(item => item.pkg_id === '90000')
      if (svipPackage) {
        return svipPackage.unlimited || (svipPackage.has_buy && Date.parse(svipPackage.expire_at) / 1000 > this.userInfo.server_time)
      }
      return false
    },
    vipIcon () {
      if (this.hasSvip && this.isSvip) {
        return 'svip'
      } else if (this.userInfo.is_member) {
        return 'vip'
      } else {
        return 'uvip'
      }
    },
    allVipUnlimited () {
      return this.userInfo.is_member && this.packagesList.length && !this.packagesList.some(it => it.tag !== 3)
    },
    buyFreeType () {
      if (!this.buyFreeActId || this.packagesList.length < 3) return 0
      return this.packagesList.filter(it => it.tag !== 3).length
    },
    needBind () {
      return !this.userInfo.HasBindWx && !this.userInfo.PhoneNumber
    }
  },
  watch: {
    'userInfo.user_id': {
      handler (val) {
        if (!val) {
          this.trialVisible = false
        } else if (val !== -1000) {
          this.getPeriodInfo()
          this.getExperienceInfo()
        }
        this.showBindMessage('您当前以游客身份登录，为了保障您的账户安全并防止数据丢失，到建议您及时绑定手机号或微信')
      }
    },
    'userPackageInfo' (val) {
      this.transPackagesList(this.packagesList)
    }
  },
  filters: {
    filtersTagName (item) {
      const val = item.tag
      if (val === 4) return `剩${item.leftDay}天`
      const obj = {
        '-2': '试用结束',
        '-1': '会员过期',
        1: '试用中',
        2: '已开通',
        3: '终身'
      }
      return obj[val] || '未开通'
    },
    filtersActName (num) {
      if (num > 1) {
        return `买${num - 1}送1`
      }
      if (num === 1) {
        return '0.01元'
      }
      return ''
    },
    filtersPayType (val) {
      switch (val) {
        case 1:
          return '支付宝'
        case 2:
          return '微信'
        case 5:
          return '联想'
        default:
          return ''
      }
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.meta.whiteList || this.userInfo.user_id) {
      next()
    } else {
      this.onLogin()
      next(false)
    }
  },
  activated () {
    this.hasAd()
  },
  created () {
    this.adTime.leaveTime = getLeftDay(this.adTime.end + ' 23:59', new Date().getTime() / 1000)
    this.pkgid = this.$route.query.pkgid || '10000'
    this.init()
    this.$xzReg('inform_pay_result', () => {
      // this.getUserInfo()
      this.dispatch('Layout', 'msg-change', false)
      this.$store.dispatch('user/getUserInfo')
      this.$store.commit('user/SET_HASPAY', true)
      this.getPeriodInfo()
      this.showBindMessage('恭喜您成为尊贵的会员！为了保障您的多端数据同步权益，请及时绑定账号。')
    })
    this.$xzReg('inform_try_rights', (res, pkgid, cid) => {
      this.pkgid = pkgid || '10000'
      if (this.$route.path !== '/usercenter') this.$router.push('/usercenter')
      this.showTrialDialog()
    })
  },
  methods: {
    handleCommand (command) {
      if (typeof this[command] === 'function') {
        this[command]()
      }
    },
    showBindMessage (message) {
      if (!this.userInfo.user_id) return
      if (this.needBind) {
        this.$PsMessageBox({
          iconClass: 'error',
          confirmButtonText: ['144'].includes(this.appInfo.appID) ? '绑定账号' : '绑定账号领取7天会员',
          showCancelButton: false,
          roundButton: true,
          message
        }).then(() => {
          this.showBind = true
        })
      }
    },
    onBindSuccess () {
      this.showBind = false
      this.onAutoDrawTrial()
      this.onAutoDrawPrize()
    },
    onAutoDrawTrial () {
      this.$store.dispatch('user/drawTrial').then(data => {
        this.getUserInfo()
        if (data) {
          this.$xz('xz_switch_dialog', 'XZDesktopTrySuccess', true, JSON.stringify({
            c_pkgids: data
          }))
        }
      })
    },
    onAutoDrawPrize () {
      this.$store.dispatch('user/drawPrize')
        .then(isDraw => {
          isDraw && this.$xz('xz_update_pay_result', true)
        })
    },
    openKefuUrl () {
      openKefu()
    },
    async init () {
      this.getActivityList()
      this.getPeriodInfo()
      await this.getPackages()
      if (this.$route.query.trialDialog === 'true') {
        this.$nextTick(() => {
          this.applyTrial()
        })
      }
      this.getBtnCfg()
    },
    getPeriodInfo () {
      if (!this.userInfo.user_id || this.appInfo.allPackages.length > 1) return
      getPeriodInfo({ pkg_id: this.appInfo.allPackages.join() }).then(res => {
        const agreements = res?.agreements || []
        this.periodInfo = agreements.find(it => it.status === 'signed_success') || {}
      })
    },
    getExperienceInfo () {
      getChangeExperienceInfo({ pkg_id: this.appInfo.allPackages }).then(res => {
        const list = res.data.list || []
        this.expList = list.map(item => {
          item.id = item.p_id
          return item
        })
      })
    },
    hasAd () {
      if (this.appInfo.appID === '125') return false
      const now = new Date()
      let isOnAdTime = now - new Date(this.adTime.start + ' 00:00') > 0 && now - new Date(this.adTime.end + ' 23:59') < 0
      if (this.appInfo.appID === '22' && !isOnAdTime) {
        isOnAdTime = now - new Date(this.adTime.addStart + ' 00:00') > 0 && now - new Date(this.adTime.addEnd + ' 23:59') < 0
        this.adTime.leaveTime = -1
      }
      if (isOnAdTime) {
        this.onAd = true
      }
      return isOnAdTime
    },
    onActCode () {
      this.$xz('xz_substat_action', 1754)
      if (this.userInfo.user_id) {
        this.exchangeCode = ''
        this.showInCodeDialog = true
        this.$nextTick(() => {
          this.$refs.exchangeCode.focus()
        })
      } else {
        this.onLogin()
      }
    },
    showMemberDialog (packageItem, tab = 'vip') {
      new Promise(resolve => {
        if (this.userInfo.user_id) {
          this.$store.dispatch('user/checkStatus')
            .then(() => {
              resolve(true)
            })
            .catch(() => {
              resolve(false)
            })
        } else {
          resolve(false)
        }
      }).then(status => {
        // 3.1.3.16以上（不包含）支持未登录打开付款页面
        if (status || isPassVersion('3.1.3.17')) {
          if (tab === 'energy') {
            this.$xz('xz_substat_action', 8509)
            this.$xz('xz_set_stat_id', 8509)
          } else if (!packageItem) {
            this.$xz('xz_set_stat_id', 8003)
            packageItem = this.activePackage
            this.trialVisible = false
          } else {
            this.$xz('xz_substat_action', 1748)
          }
          this.toPayPage(packageItem, tab)
        } else {
          this.onLogin()
        }
      })
    },
    toPayPage (packageItem, tab) {
      if (this.packagesList.length === 1) {
        return
      }
      const cid = getCidByPkg(packageItem.pkg_id)
      if (isPassVersion('3.0.2')) {
        this.$xz('xz_switch_dialog', 'XZDesktopOrderVIP', true, JSON.stringify({ cid, pkgid: packageItem.pkg_id, tab }))
      } else {
        this.$xz('xz_switch_dialog', 'XZDesktopOrderVIP', true)
      }
    },
    showTrialDialog (pkgid) {
      if (!this.userInfo.user_id) {
        return this.onLogin()
      }
      this.applyTrial(pkgid)
    },
    applyTrial (pkgid = this.pkgid) {
      const item = this.packagesList.find((item) => {
        return item.pkg_id === pkgid
      })
      if (!item) return
      if (item.tag !== 3 && item.trialTime) {
        this.activePackage = item
        this.trialVisible = true
      } else {
        this.drawTrialError()
      }
    },
    onDrawTrial () {
      batchDrawTrial({ pkg_id: [this.activePackage.pkg_id] }).then(res => {
        const list = res.data?.list || []
        const code = list[0]?.sub_code
        this.getUserInfo()
        if (code === 'success') {
          this.$xz('xz_try_rights', true)
          this.$xzAsy('xz_get_stat_id').then(res => {
            if (/^8\d{3}$/.test(res) || !res) {
              const obj = {
                '10000': '9003',
                '20000': '9005',
                '40000': '9101'
              }
              const actionId = (res || 8003) + obj[this.activePackage.pkg_id]
              this.$xz('xz_substat_action', parseInt(actionId))
            } else {
              this.$xz('xz_substat_action', res)
            }
          })
          this.$PsMessageBox({
            iconClass: 'success',
            customClass: 'message-white',
            center: true,
            confirmButtonText: '立即试用',
            confirmButtonClass: 'el-button--primary big-btn',
            showCancelButton: false,
            message: `恭喜您获得${this.activePackage.trialTime}免费试用${this.activePackage.name}！`
          })
        } else {
          this.drawTrialError(code)
        }
      })
    },
    drawTrialError (code) {
      this.$PsMessageBox({
        iconClass: 'error',
        customClass: 'message-white',
        confirmButtonText: '开通会员',
        confirmButtonClass: 'el-button--primary big-btn',
        showCancelButton: false,
        dangerouslyUseHTMLString: true,
        message: `抱歉，${code === 'repeat_draw' ? '该账号已领取过该权益包试用福利' : '该权益包试用福利已过期'}，请开通会员后继续使用权益`

      }).then(() => {
        this.toPayPage(this.activePackage)
      })
    },
    getUserInfo () {
      this.getExperienceInfo()
      this.$store.dispatch('user/getUserInfo')
    },
    /** 获取在售权益包 */
    async getPackages () {
      await getPackagesList({ pid: this.appInfo.allPackages }).then(res => {
        // await getPackagesList({ pid: [ this.appInfo.allPackages[2] ] }).then(res => {
        const list = this.filtersRights(res.data.list || [])
        this.transPackagesList(list)
        // setTimeout(() => {
        //   // const hasShowAd = localStorage.getItem('HasShowAd')
        //   const hasShowAd = null
        //   if (!hasShowAd && this.onAd && !this.allVipUnlimited) {
        //     localStorage.setItem('HasShowAd', true)
        //     this.adDialogShow = true
        //   }
        // }, 50)
      })
    },
    transPackagesList (list) {
      if (!list.length) return
      list.map(itemb => {
        const buyPackage = this.getBuyPackage(itemb)
        const leftDay = getLeftDay(buyPackage.expire_at, this.userInfo.server_time)
        const tag = this.getTag(buyPackage, leftDay)
        itemb.trial_status = buyPackage.trial_status
        itemb.tag = tag
        itemb.leftDay = leftDay
        itemb.expire_at = buyPackage.expire_at
        itemb.cat_list = (itemb.cat_list || []).map(item => {
          item.right_list = this.filtersRights(item.right_list)
          return item
        })
        if (buyPackage.trial_status !== 2) {
          itemb.trialTime = '7天'
        } else if (buyPackage.minutes > 0) {
          itemb.trialTime = buyPackage.minutes >= 1440 ? `${buyPackage.minutes / 24 / 60}天` : `${buyPackage.minutes}分钟`
        } else {
          itemb.trialTime = ''
        }

        itemb.showTrial = itemb.showTrial || false
        return itemb
      })
      this.packagesList = list
      this.activePackage = list[0]
      this.adActive = list[0].pkg_id
    },
    filtersRights (list = []) {
      return list.filter(item => {
        item.name = item.name.replace('\n', '')
        return isPassVersion(item.min_ver)
      })
    },

    getBuyPackage (pckItem) {
      if (!pckItem || !this.userPackageInfo) return {}
      const obj = this.userPackageInfo.find((item) => item.id === pckItem.id)
      return obj || {}
    },
    // tag类型 -2试用已到期 -1已到期 0 非会员 1试用过未到期 2已购买 3终身 4快到期
    getTag (buyPackage, leftDay) {
      if (!buyPackage.id || !buyPackage.expire_at) return 0
      if (buyPackage.unlimited) return 3
      if (leftDay <= 0) {
        if (!buyPackage.has_buy) {
          return -2
        } else {
          return -1
        }
      } else {
        if (!buyPackage.has_buy) {
          return 1
        } else if (leftDay < 8) {
          return 4
        } else {
          return 2
        }
      }
    },
    getActivityList () {
      activityList()
        .then(res => {
          const actItem = (res.data?.list || []).find(it => it.act_fixed_id === '10001')
          actItem && (this.buyFreeActId = actItem.id)
        })
    },
    /** 立即登录 */
    handleLogin () {
      this.$xz('xz_substat_action', 1721)
      this.onLogin()
    },
    /** 修改昵称 */
    updateNickName () {
      this.$PsMessageBox.prompt('修改昵称：', {
        inputValue: this.userInfo.Nickname,
        maxlength: 36,
        chineseLen: 2,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            const name = instance.inputValue
            updateUser({ Nickname: name }).then(res => {
              this.$store.dispatch('user/mergeUserInfo', { Nickname: name })
              done()
            }).finally(() => {
              instance.confirmButtonLoading = false
            })
          } else {
            done()
          }
        },
        inputValidator: value => {
          if (!value) return '昵称不能为空'
          // eslint-disable-next-line no-control-regex
          const str = value.replace(/[^\x00-\xff]/g, '01')
          if (str.length > 36) return '昵称已超过最长限制'
          return true
        }
      })
    },
    updateAvatar () {
      this.portraitOpen = true
    },
    /** 退出登录 */
    handleLoginOut () {
      this.$xz('xz_set_stat_id', 0)
      this.$store.dispatch('user/logout')
    },
    onAdDialogShow (isCheck) {
      const isOnAdTime = this.isOnAdTime()
      if (!isOnAdTime) return

      this.$xz('xz_substat_action', 1780)
      this.adDialogShow = true
    },
    onPaySucces () {
      this.adDialogShow = false
    },
    isOnAdTime () {
      const onTime = this.hasAd()
      if (!onTime) {
        this.$PsMessage({
          message: '活动有效期已过，敬请期待下一期活动',
          iconClass: 'error'
        })
        return false
      }
      return true
    },
    onTrial () {
      this.trialVisible = false
      this.$xz('xz_substat_action', 1746)
      this.onDrawTrial()
    },

    checkExchangeCode () {
      this.exchangeLoading = true
      this.$xz('xz_substat_action', 1755)
      exchangeCodeResource({ code: this.exchangeCode }).then(res => {
        this.exchangeLoading = false
        this.showInCodeDialog = false
        this.exchangeCodePackage = res.data || {}
        this.confirmExchangeDialog = true
      }).catch(err => {
        this.exchangeLoading = false
        this.$PsMessage.closeAll()
        this.$PsMessage({
          offset: 169,
          iconClass: 'error',
          message: err.msg || '兑换码错误，请重新输入！'
        })
      })
    },
    confirmExchange () {
      this.exchangeLoading = true
      this.$xz('xz_substat_action', 1758)
      actExchangeCode({ code: this.exchangeCode }).then(() => {
        this.confirmExchangeDialog = false
        this.$xz('xz_update_pay_result', true)
        this.$PsMessage({
          offset: 169,
          iconClass: 'success',
          message: `恭喜您成功兑换${this.exchangeCodePackage.name}！`
        })
      }).catch(err => {
        this.$PsMessage.closeAll()
        this.$PsMessage({
          offset: 169,
          iconClass: 'error',
          message: err.msg || '服务异常，请联系客服！'
        })
      }).finally(() => {
        this.exchangeLoading = false
      })
    },
    onExchangeClose () {
      this.confirmExchangeDialog = false
      this.$xz('xz_substat_action', 1759)
    },
    onDetail (i) {
      this.$xz('xz_substat_action', 1750)
      this.showDetailDialog = true
      this.$nextTick(() => {
        this.$refs.detailEquity.activeName = i + ''
      })
    },
    /**
     * 登录弹窗
     * @param {String} type
     */
    onLogin (type) {
      this.$store.dispatch('user/login', { type })
    },
    cancelPeriod () {
      unSignPeriod({ agreement_no: this.periodInfo.agreement_no }).then(res => {
        this.periodInfo = {}
      })
    },
    toOrderList () {
      this.$xz('xz_substat_action', 1751)
      this.$router.push({
        path: '/orderlist',
        query: {
          status: 2
        }
      })
    },
    openUrl (url, id) {
      this.$xz('xz_substat_action', id)
      this.$xz('xz_open_url', url)
    },
    toCouponPage () {
      // this.$xz('xz_switch_tab', 3)
      this.adDialogShow = false
      this.$router.push({
        name: 'CouponIndex'
      })
    },

    getBtnCfg () {
      this.showEnergy = this.packagesList.length && isPassVersionByApp({
        '22': { v: '3.3.0.14' },
        '111': { v: '3.2.10.0' }
      })
      if (this.showEnergy) {
        getSceneCouponConfig({
          app_id: this.appInfo.appID,
          version: this.appInfo.version,
          union_id: this.appInfo.channel,
          keyname: 'gmanpz'
        }).then(({ data }) => {
          if (data?.params?.vip_btn) {
            this.buyVipBtnCfg = data.params.vip_btn
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/theme/common/var";
@import "@/styles/other-login.scss";
.main-content.user-container{
  padding-top: 0;
}

.user-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 20px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  .header-left {
    display: flex;
    height: 50px;
    position: relative;
    .vip-icon {
      position: absolute;
      top: -2px;
      left: 34px;
      font-size: 24px;
    }
    .user-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      cursor: pointer;
    }
    .svip-avatar{
      background: linear-gradient(180deg, #F8DE9D 0%, #D8A04B 100%);
    }
    .login-tips{
      line-height: 44px;
      font-size: 14px;
      color: rgba(255,255,255,0.5);
    }
  }
  .info-wrap {
    margin-left: 10px;
    padding-top: 6px;
    font-size: 14px;
    .nickname {
      color: #fff;
      .name-info{
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .el-icon-caret-bottom {
        margin-left: 5px;
        vertical-align:0.25em;
      }
      &:hover {
        color: #00cce9;
      }
    }
  }
  .user-info {
    margin-top: 4px;
    color: #999;
    font-size: 12px;
    .is-member {
      color: #f8de9d;
    }
    .vip-str{
      margin: 0 25px 0 10px;
    }

    .user-zb{
      .svg-icon{
        margin-right: 2px;
        margin-bottom: -1px;
        font-size: 16px;
      }
      .zb-num{
        margin-right: 5px;
        color: #fff;
      }
      .el-button{
        padding: 0;
      }
    }
  }
  .period_box{
    position: relative;
    margin-left: 6px;
    line-height: 18px;
    &:hover{
      .period_popover{
        display: block;
      }
    }
    i{
      padding: 4px 6px;
      background-color: rgba($color: #F8DE9D, $alpha: 0.1);
      border-radius: 4px;
    }
    .period_popover_body{
      width: 208px;
      // height: 140px;
      padding: 18px 20px;
      background: #34353B;
      box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
      border-radius: 6px;
      border: 1px solid rgba(255,251,251,0.1);
    }
    .period_popover{
      display: none;
      position: absolute;
      left: -77px;
      top: 15px;
      padding-top: 10px;
      z-index: 999;
      color: rgba($color: #fff, $alpha: 0.7);
    }
    .period_popover_item{
      font-size: 12px;
      line-height: 20px;
      &::before{
        content: ' ';
        display: inline-block;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        margin-right: 6px;
        background: #D9D9D9;
        vertical-align: middle;
      }
    }
    .cancel_period{
      display: inline-block;
      padding: 5px 16px;
      color: #fff;
      line-height: 20px;
      background: rgba(#fff, 0.1);
      border-radius: 6px;
      cursor: pointer;
      &:hover{
        background-color: rgba(#fff, 0.2);
      }
    }
  }
  .header-right {
    .unlogin-head-btn{
      margin-left: 20px;
      padding: 4px 21px;
      background: #00B8E6;
      border-radius: 4px;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
      &:hover {
        background: #00BBD7;
      }
    }
  }
}
.user-avatar-menu{
  position: absolute;
  top: 28px;
  left: 33px;
  width: 90px;
  background: #4e4e4e;
  border: 1px solid #707070;
  border-radius: 3px;
  z-index: 999;
  .avatar-menu-item{
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 27px;
    cursor: pointer;
    border-top: 1px solid #707070;;
    &:hover{
      color: #00BBD7;
    }
    &:first-child{
      border-top: 0;
    }
    .upload-btn{
      display: inline-block;
      width: 88px;
    }
  }
}
.act-code-btn{
  font-size: 12px;
  color: #F8DE9D;
  cursor: pointer;
}
.other-login-btn{
  margin-left: 15px;
  font-size: 12px;
  cursor: pointer;
  &:hover{
    color: #00BBD7;
  }
}
.logout-btn{
  margin-left: 15px;
  font-size: 12px;
  cursor: pointer;
  &:hover{
    color: #fff;
    text-decoration: underline;
  }
}
.open-svip-btn{
  margin-left: 20px;
  padding: 9px 16px;
  color: #fff;
  background: linear-gradient(180deg, #F8DE9D 0%, #D8A04B 100%);
  border: 0;
  border-radius: 4px;
}
.package-box{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.ad-card{
  height: 60px;
  margin-top: 10px;
  margin-bottom: -8px;
  justify-content: center;
  padding-top: 36px;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
  background-image: url('../../assets/ad-card.png');
  cursor: pointer;
  &.ad-card1{
    background-image: url('../../assets/ad-card1.png');
  }
  &.ad-card-half{
    background-image: url('../../assets/ad-card-half.png');
  }
  &.ad-half1{
    background-image: url('../../assets/ad-card-half1.png');
  }
  &.ad-card-half_n{
    background-image: url('../../assets/ad-card-half_n.png');
  }
  &.ad-card-1{
    background-image: url('../../assets/ad-card-1.png');
  }
  .ad-card-time{
    color: #fff;
    font-weight: bold;
  }
}
.package-list{
  flex: 1;
  height: 380px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 110px;
  border-radius: 6px;
  // background: linear-gradient(180deg, #5C6078 0%, #404355 100%);
  + .package-list{
    margin-left: 20px;
  }
  .package-info{
    flex: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #5C6078 0%, #404355 100%);
    border-radius: 0px 0px 6px 6px;
    position: relative;
  }
  .package-btn{
    position: absolute;
    top: 0;
    // height: 160px;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0px 0px 6px 6px;
    // flex: 93px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 26px;
    flex-wrap: wrap;
    transition: height .25s ease;
    &.has-trial{
      // height: 100%;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.54) 0%, #24262F 40%, #24262F 100%);
      animation: showPackageToolbar .25s;
      .btn-trial{
        display: inline-block;
      }
    }
    .tag-btn-1{
      border: none;
      background: linear-gradient(180deg, #F1C34F 0%, #C7903C 100%);;
    }
    .look-more{
      display: inline-block;
      margin-bottom: 15px;
      color: #F8DE9D;
      cursor: pointer;
      font-size: 13px;
      position: relative;
      padding-right: 14px;
      &:hover{
        text-decoration: underline;
      }
      &::after{
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -3px;
        border: 3px solid transparent;
        border-left-width: 4px;
        border-right-width: 4px;
        border-left-color:  #F8DE9D;
      }
    }
    .el-button--info{
      background: linear-gradient(180deg, #686868 0%, #3C3C3C 100%);
      color: #F8DE9D;
      &:hover{
        background: linear-gradient(180deg, #828080 0%, #3C3C3C 100%);
      }
    }
    .btn-trial{
      display: none;
      margin-bottom: 15px;
      margin-left: 0;
      background: none;
      border: 1px solid #F8DE9D;
      color: #F8DE9D;
      &:hover{
        border-color: #FFF1CD;
        color: #FFF1CD;
      }
    }

  }
  &.package-vip{
    .package-title{
      background-image: url('../../assets/vip-bg.png');
      color: #60480C;
      .end-time{
        color: #60480C;
      }
    }
    .package-info{
      background: linear-gradient(180deg, #FFF8E6 0%, #FFEFCA 100%);
    }
    .package-content{
      color: #333333;
    }
    .look-more{
      color: #9F760F;
      &::after{
        border-left-color: #9F760F;
      }
    }
    .btn-trial{
      border-color: #9F760F;
      color: #9F760F;
    }

  }
}
.package-title{
  flex: 0 0 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  background: url('../../assets/uvip-bg.png');
  background-size: 102% 100%;
  box-shadow: inset 0px 3px 6px 0px rgba(0, 0, 0,.16);
  border-radius: 6px 6px 0px 0px;
  img{
    width: 36px;
    height: 36px;
    margin-right: 8px;
  }
  .end-time{
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    cursor: pointer;
    &:hover{
      text-decoration: underline;
    }
  }
}
.package-content{
  flex: 1;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #FFFFFF;
  .package-rights{
    padding-top: 4px;
    font-size: 12px;
    line-height: 16px;
    p{
      margin-top: 15px;
    }
    .svg-icon{
      margin-right: 10px;
    }
  }
}

.btns-wrap{
  width: 100%;
  padding: 0 25px;
  box-sizing: border-box;
  .el-button{
    display: block;
    min-height: 40px;
    margin-left: 0;
  }
  .el-button--info{
    width: 100%;
    border: 0;
    background: linear-gradient(180deg, #686868 0%, #3C3C3C 100%);
    color: #F8DE9D;
    border-radius: 8px;
    &:hover{
      background: linear-gradient(180deg, #828080 0%, #3C3C3C 100%);
    }
  }
  .el-button--success{
    border: 0;
    background: linear-gradient( 360deg, #22B9B0 0%, #2FC699 100%);
    &:hover{
      background: linear-gradient( 360deg, #2FC699 0%, #2FC699 100%);
    }
  }
  .btn-trial2{
    background: rgba(31,200,128,0.1);
    border-color:rgba(31,200,128,0.3);
    color: #1FC880;
    &:hover{
      background: rgba(31,200,128,0.3);
    }
  }
  .el-button-group{
    display: flex;
    .el-button{
      flex: 1;
      overflow: hidden;
    }
    > .el-button:first-child {
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }
    > .el-button:last-child {
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  }
}

.tag {
  position: absolute;
  left: -4px;
  top: -6px;
  width: 60px;
  line-height: 20px;
  background: linear-gradient(180deg, #C1C1C1 0%, #858585 100%);
  border-radius: 3px 10px 10px 0px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  &::after{
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    border: 2px solid transparent;
    border-top-color: #5C5C5C;
    border-right-color: #5C5C5C;
  }
  &.tag-2,&.tag-3 {
    background: linear-gradient(180deg, #FFD670 0%, #CE8F2F 100%);
    &::after{
      border-top-color: #97610C;
      border-right-color: #97610C;
    }
  }
  &.tag-1,&.tag-4{
    background: linear-gradient(180deg, #FF8088 0%, #FC3535 100%);
    &::after{
      border-top-color: #900001;
      border-right-color: #900001;
    }
  }
}

.act-tag{
  position: absolute;
  right: -3px;
  top: -3px;
  width: 54px;
  height: 54px;
  background: url('~@/assets/hot.png');
  .hot-tips{
    position: relative;
    bottom: -10px;
    left: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    transform: rotate(45deg);
  }
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 22px;
  .svg-icon {
    width: 100px;
    height: 70px;
    margin-bottom: 4px;
  }
  span {
    font-size: 12px;
    color: #fff;
    opacity: 0.3;
  }
}
.trial-header {
  padding-bottom: 10px;
  text-align: center;
  font-size: 14px;
}
.trial-dialog-footer {
  text-align: center;
  padding-bottom: 9px;
}

.code-wrap{
  padding: 0 41px;
  .exchange-btn{
    margin-top: 20px;
    border-radius: 4px;
    width: 100%;
  }
}
.code-footer{
  height: 25px;
  .kefu-link,.licence-link{
    position: absolute;
    bottom: 12px;
    cursor: pointer;
    &:hover{
      text-decoration: underline;
    }
  }
  .kefu-link{
    left: 16px;
  }
  .licence-link{
    right: 8px;
  }
}
.exchange-code-info{
  text-align: center;
  .code-info-title{
    font-size: 16px;
    color: #F8DE9D;
    margin-bottom: 17px;
    margin-top: -13px;
    .svg-icon{
      margin-bottom: -1px;
      margin-right: 5px;
      font-size: 24px;
    }
  }
}
.confirm-code-footer{
  text-align: center;
  .el-button+.el-button{
    margin-left: 20px;
  }
}
.ad-right-list{
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
}
.ad-right-title{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  font-weight: bold;
  .svg-icon{
    margin-right: 5px;
    font-size: 24px;
  }
}
@media screen and (max-width:650px) {
  .app-wrapper .main-content{
    padding: 28px 15px 10px;
  }
}
</style>
<style lang="scss">
.trial-dialog {
  background: #fff;
  .el-dialog__header {
    text-align: center;
    background: #F6F6F6;
  }
  .dialog-title {
    font-size: 14px;
    color: #333;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #333;
  }
  .el-dialog__body {
    padding: 20px;
    color: #333;
  }
}
.trial-wrapper .el-dialog__wrapper{
  background: rgba(0,0,0,0.5);
}
.dialog-detail{
  min-height: 240px;
  .el-dialog__header,.el-dialog__body{
    padding: 0;
  }
  .el-tabs{
    .el-tabs__content{
      padding: 20px;
    }
    .el-tabs__nav{
      margin: 0 6px;
    }
    .el-tabs__item{
      padding: 13px 20px 12px;
      margin: 0;
      &.is-active{
        color: #F8DE9D;
      }
      &:nth-child(2){
        padding-left: 0;
      }
      &:last-child {
          padding-right: 0;
      }
    }
    .el-tabs__active-bar{
      bottom: 1px;
      border-radius: 3px;
      &::after{
        background-color: #F8DE9D;
      }
    }
  }
}
.dialog-ad{
  height: 490px;
  background: url("../../assets/ad-dialog-bg.png") 0 0 no-repeat,linear-gradient(180deg, #FF5F8B 0%, #D13E58 100%);
  background-size: 100%;
  box-shadow: none;
  border: none;
  &.ad-dialog-half{
    background: url("../../assets/ad-dialog-half.png") 0 0 no-repeat,linear-gradient(180deg, #FF5F8B 0%, #D13E58 100%);
    background-size: 100%;
  }
  &.ad-dialog-half_n,&.dialog-ad-1{
    background: url("../../assets/ad-dialog-half_n.png") 0 0 no-repeat,linear-gradient(180deg, #FF5F8B 0%, #D13E58 100%);
    background-size: 100%;
  }
  .el-dialog__close{
    padding: 3px;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
    font-size: 13px;
    &:hover{
      background: rgba(0,0,0,0.5);
      border-color: rgba(255,255,255,0.7);
    }
  }
  .el-dialog__header{
    padding: 0;
  }
  .el-dialog__body{
    overflow: hidden;
    padding: 45px 0 15px;
  }
  .ad-header{
    margin-top: 5px;
    text-align: center;
    color: #fff;
  }
  .copyright{
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
  }
}
.ad-tabs{
  margin-top: 10px;
  .el-tabs__item{
    min-width: 170px;
    padding-bottom:0;
    margin-right: 10px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background-color: rgba($color: #000, $alpha: 0.3);
    border-radius: 6px 6px 0px 0px;
    &:hover{
      color: #fff;
    }
    &.is-active{
      color: #985C00;
      background: linear-gradient(180deg, #FAE3C6 0%, #F8D4A2 100%);
    }
  }
  .el-tabs__header{
    padding: 0 25px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
  }
  .el-tabs__content{
    padding: 10px 25px 20px;
    height: 385px;
    overflow-y: auto;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(0,0,0,.3);
    }
    &::-webkit-scrollbar-thumb:hover {
      background: rgba(0,0,0,.4);
    }
  }
  .el-tabs__nav-wrap::after{
    display: none;
  }
}
.bind-dialog{
  .el-dialog__body{
    padding-bottom: 40px;
  }
}
.el-popper.info-wrap-dropdown-menu {
  margin-top: 0;
}
@keyframes showPackageToolbar {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
</style>
